.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 9;
}

.loadingContent {
  text-align: center;
}

.desc {
  line-height: 0.2rem;
  font-size: 0.12rem;
  color: rgba(255, 255, 255, 0.5);
}

.container {
  width: 20vw;
  height: 20vw;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.container {
  animation: container 5s linear infinite;
  -moz-animation: container 5s linear infinite;
  /* Firefox */
  -webkit-animation: container 5s linear infinite;
  /* Safari and Chrome */
  -o-animation: container 5s linear infinite;
  /* Opera */
}

@keyframes container {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.common {
  height: 5vw;
  max-height: 100%;
  overflow: auto;
  width: 2vw;
  margin: auto;
  max-width: 100%;
  position: absolute;
  background-color: transparent;
  border-radius: 0 10vw 0 10vw;
  box-shadow: inset 0 0 0 0.1vw #e645d0, 0 0 1.5vw 0 #e645d0;
}

.one {
  transform: rotate(45deg);
  left: 0;
  right: 0;
  top: 0;
  bottom: 7.5vw;
  animation: one 1s ease infinite;
}

.two {
  transform: rotate(90deg);
  left: 5.5vw;
  right: 0;
  top: 0;
  bottom: 5.5vw;
  animation: two 1s 0.125s ease infinite;
}

.three {
  transform: rotate(135deg);
  left: 7.5vw;
  right: 0;
  top: 0;
  bottom: 0;
  animation: three 1s 0.25s ease infinite;
}

.four {
  transform: rotate(180deg);
  left: 5.5vw;
  right: 0;
  top: 5.5vw;
  bottom: 0;
  animation: four 1s 0.375s ease infinite;
}

.five {
  transform: rotate(225deg);
  left: 0;
  right: 0;
  top: 7.5vw;
  bottom: 0;
  animation: five 1s 0.5s ease infinite;
}

.six {
  transform: rotate(270deg);
  left: 0;
  right: 5.5vw;
  top: 5.5vw;
  bottom: 0;
  animation: six 1s 0.625s ease infinite;
}

.seven {
  transform: rotate(315deg);
  left: 0;
  right: 7.5vw;
  top: 0;
  bottom: 0;
  animation: seven 1s 0.75s ease infinite;
}

.eight {
  transform: rotate(360deg);
  left: 0;
  right: 5.5vw;
  top: 0;
  bottom: 5.5vw;
  animation: eight 1s 0.875s ease infinite;
}

@keyframes one {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}

@keyframes two {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}

@keyframes three {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}

@keyframes four {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}

@keyframes five {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}

@keyframes six {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}

@keyframes seven {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}

@keyframes eight {
  0%,
  100% {
  }
  50% {
    background: transparent;
    box-shadow: inset 0 0 0 0.1vw #17e1e6, 0 0 1.5vw 0 #17e1e6;
  }
}
